<template>
  <a-modal
    :open="isOpen"
    :title="`新增${props.dictionaryData.dictionaryName || ''}`"
    @ok="handleAddEdit"
    @cancel="onCancel"
  >
    <a-form ref="formRef" :model="addObj">
      <a-form-item
        :label="`${props.dictionaryData.dictionaryName || ''}`"
        name="itemName"
        :rules="[
          { required: true, message: `请输入${props.dictionaryData.dictionaryName || ''}` },
          { chineseInput: true, message: '只能输入中文' },
        ]"
      >
        <a-input v-model:value="addObj.itemName"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue';
import DictionaryManage from '@/api/dictionary';
import { message } from 'ant-design-vue';

const emits = defineEmits(['cancel', 'success']);

// 接收父组件
const formRef = ref(null);
const props = defineProps({
  isOpen: {
    type: Boolean,
    required: true,
  },
  editData: {
    type: Object,
  },
  dictionaryData: {
    type: Object,
    required: true,
  },
});

const addObj = ref({});

// onCancel 事件
const onCancel = () => {
  emits('cancel');
  formRef.value.resetFields();
};

const handleAddEdit = async () => {
  // 先对数据进行校验
  await formRef.value.validateFields();

  // debugger;
  const addDictionaryItemData = ref({
    dictionaryId: props.dictionaryData.dictionaryId,
    itemName: addObj.value.itemName,
  });
  console.log(props.dictionaryData.dictionaryId);
  await DictionaryManage.addDictionaryItem(addDictionaryItemData.value);
  message.success('新增成功');
  emits('success');
  formRef.value.resetFields();
};
</script>

<style></style>
